<template>
  <div class="business-role">
    <div class="left">
      <div class="left-title">全部角色</div>
      <div v-if="list.length===0" class="nothing">无</div>
      <div v-if="list.length>0" ref="leftMenu" class="left-menu" @scroll="onScrollLeftMenu">
        <el-scrollbar ref="" style="height:100%" class="hid-scrollbar-x">
          <el-menu :default-active="roleActiveIndex">
            <el-menu-item
              v-for="(item,index) in list"
              :key="index"
              :index="String(index)"
              @click="handlePerm(item.id,index)"
            >
              <span slot="title">{{ item.name }}</span>
              <div class="edit-btn">
                <i
                  v-if="!$store.getters.banBtnList.includes('BTN_ROLE_EDIT')"
                  class="el-icon-edit app-text-color-primary"
                  @click.stop="handleEdit(item.id,index)"
                />
                <i
                  v-if="!$store.getters.banBtnList.includes('BTN_ROLE_DELETE')"
                  class="el-icon-delete app-text-color-danger"
                  @click.stop="handleDelete(item.id,index)"
                />
              </div>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </div>
    </div>

    <div class="right">
      <div class="flexRBC user-num">
        <div class="title">
          <div v-if="list.length>0">
            当前权限角色名：
            <span class="app-text-color-primary">{{ list[roleActiveIndex].name }}</span>
          </div>
        </div>
        <div>
          <el-button
            v-if="!$store.getters.banBtnList.includes('BTN_ROLE_ADD')"
            type="primary"
            size="medium"
            round
            @click="handleAdd"
          >新增角色</el-button>
        </div>
      </div>
      <!-- <div class="right-left">
        <div class="title">使用场景</div>
        <ul class="content">
          <el-menu :default-active="roleTypeActiveIndex" @select="roleTypeSelect">
            <el-menu-item index="0" key="0">
              <span slot="title">商户平台</span>
            </el-menu-item>
            <el-menu-item index="1" key="1">
              <span slot="title">商户助手</span>
            </el-menu-item>
            <el-menu-item index="1"   key="1">
              <span slot="title">小程序</span>
            </el-menu-item>
            <el-menu-item index="2"   key="2">
              <span slot="title">公众号</span>
            </el-menu-item>
          </el-menu>
        </ul>
      </div>-->
      <div class="right-right">
        <!-- <div class="title">可用权限</div> -->
        <div class="content">
          <div v-if="list.length==0" class="nothing">无</div>
          <!-- <div v-show="list.length!=0" class="role-box"> -->
          <!-- <el-scrollbar style="height:100%" class="hid-scrollbar-x" ref=""> -->
          <role-resource v-else ref="roleResource" :scope="scope" />
          <!-- </el-scrollbar> -->
        </div>
      </div>
    </div>

    <dialog-role ref="roleDialog" :scope="scope" />
  </div>

</template>

<script>
import DialogRole from './components/DialogRole'
import RoleResource from './components/RolePerm'
import { listRole, deleteRole } from '@/api/role'

export default {
  components: {
    DialogRole,
    RoleResource
  },
  props: {
    tabName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      // 配置
      // roleTypeActiveIndex: "0",
      roleActiveIndex: '0',
      scope: 2,
      total: 0,
      // 数据
      listQuery: {
        pageNum: 1,
        pageSize: 999,
        name: undefined
      },
      list: [],
      roleId: 0 // 记录roleId值
    }
  },
  watch: {
    tabName(val) {
      if (val === 'role') {
        this.fetchData()
      }
    }
  },

  mounted() {},
  methods: {
    /**
       * 获取数据
       */
    // 获取角色
    fetchData(type = '') {
      listRole(this.listQuery, this.scope).then(res => {
        if (res.code === 0) {
          this.list = res.data.list.filter(i => i.type === 0)
          this.total = res.data.total
          if (this.list.length > 0 && type === '') {
            this.handlePerm(this.list[0].id, 0)
          }
          if (this.list.length > 0 && type === 'add') {
            this.$nextTick(() => {
              this.handlePerm(
                this.list[this.list.length - 1].id,
                this.list.length - 1
              )
            })
          }
          if (this.list.length > 0 && type === 'edit') {
            this.handlePerm(this.roleId, this.roleActiveIndex)
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 滚动事件
    onScrollLeftMenu() {
      const el = this.$refs.leftMenu
      const offsetHeight = el.offsetHeight
      const scrollTop = el.scrollTop
      const scrollHeight = el.scrollHeight
      if (offsetHeight + scrollTop - scrollHeight >= -1) {
        //  滚动到底部加载更多数据
      }
    },

    /**
       * 按钮组
       */

    // handleSizeChange(val) {
    //   this.listQuery.pageSize = val;
    //   this.fetchData();
    // },

    // handleCurrentChange(val) {
    //   this.listQuery.pageNum = val;
    //   this.fetchData();
    // },

    // 新增
    handleAdd() {
      this.$refs.roleDialog.openAdd().then(() => {
        this.fetchData('add')
      })
    },

    // 编辑
    handleEdit(roleId, index) {
      this.roleId = roleId
      this.roleActiveIndex = String(index)
      this.$refs.roleDialog.openEdit(roleId).then(() => {
        this.fetchData('edit')
      })
    },

    // 打开对应权限
    handlePerm(roleId, index) {
      this.roleId = roleId
      this.roleActiveIndex = String(index)
      this.$nextTick(() => {
        this.$refs.roleResource.open(roleId).then(() => {})
      })
    },

    // 删除
    handleDelete(roleId, index) {
      this.$confirm(
        `此操作将永久删除角色${this.list[index].name}, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          roundButton: true
        }
      ).then(() => {
        deleteRole(roleId, this.scope).then(res => {
          if (res.code === 0) {
            this.fetchData()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }

    // roleTypeSelect(key) {
    //   if(key==="0"){//管理后台
    //     /*role_id this.scope*/
    //     this.scope=1
    //     this.$refs.roleResource.open(this.roleId).then(() => {});
    //   }else if(key==="1"){//商户助手
    //     this.scope=2
    //     this.$refs.roleResource.open(this.roleId).then(() => {});
    //   }
    //   this.roleTypeActiveIndex = key;
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .business-role {
    overflow: hidden;
    max-height: calc(100vh - 80px);
  }

  .left {
    overflow: hidden;
    float: left;
    height: 100%;
    margin-right: 10px;
    border-radius: 5px;
    background-color: #fff;
    &-title {
      height: 50px;
      padding: 0 10px;
      line-height: 50px;
      border-bottom: 1px solid #e7e7e7;
      font-size: 20px;
      font-weight: bold;
    }
    &-menu {
      height: calc(100vh - 130px);
    }
  }

  .right {
    overflow: hidden;
    padding: 24px 10px 24px 20px;
    background-color: #fff;
    // .role-box {
      // height: calc(100vh - 160px);
    // }
    .title{
      font-size: 18px;
      font-weight: bold;
    }
    .user-num {
      height: 56px;
      padding: 0 10px 14px 10px;
      border-bottom: 1px solid #e7e7e7;
    }
  }
  .nothing {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  // 去el-menu左边border
  .el-menu {
    border-right: none;
    .el-menu-item {
      padding-right: 70px;
    }
    .el-menu-item:hover .edit-btn {
      display: block;
    }
    .edit-btn {
      display: none;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
</style>
